<template>
  <j-modal
    :title="'预测数据 【 ' + model.datasetCode + ' 】'"
    :width="width"
    :visible="visible"
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <template slot="footer"> 
      <a-button  @click="handleCancel">关闭</a-button>
      <a-button :loading="confirmLoading" type="primary" @click="handleOk">预测</a-button>
    </template>

    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
            <!-- <a-col :span="8">
              <a-form-model-item label="数据集" :labelCol="labelCol" :wrapperCol="wrapperCol">
               {{model.datasetCode}}
              </a-form-model-item>
            </a-col>  -->
             <a-col :span="12">
              <a-form-model-item label="数据模型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="modelBaseCode"> 
                <a-select  ref="modelBaseSelect" placeholder="请选择数据模型"  v-model="modelBaseSelected"  @change="modelBaseHandleChange"> 
                  <a-select-option v-for="item in modelBaseList" :key="item.code" :value="item">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
             <a-col :span="12">
              <a-form-model-item label="属性" :labelCol="labelCol" :wrapperCol="wrapperCol">
                  {{model.predictPropertyText}}
                <!-- <a-input-search
                placeholder="请选择预测目标"
                readOnly
                v-model="model.predictProperty"
                @search="doSelectDataPropertyList1()"
              /> -->
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider style="margin-bottom: 32px"/>
          <a-row>
            <a-col :span="24">
              <div>
                <a-row type="flex" style="margin-bottom: 10px" :gutter="16">
                  <a-col :span="6">列名</a-col>
                  <a-col :span="8">随机下限</a-col>
                  <a-col :span="8">随机上限</a-col>
                  <a-col :span="2">操作</a-col>
                </a-row>

                <a-row type="flex" :gutter="16" v-for="(item, index) in model.resetColumns" :key="index">
                  <a-col :span="6" style="display: none">
                    <a-form-model-item>
                      <a-input placeholder="id" v-model="item.id" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="6">
                    <a-form-model-item
                      :prop="'resetColumns.' + index + '.propName'"
                      :rules="[{ required: true, message: '请输入列名', trigger: 'blur,change' }]"
                    >  
                      <a-input-search
                        placeholder="列名"
                        readOnly
                        v-model="item.propName" 
                        @search="doSelectDataPropertyList2(index)"
                      /> 
                    </a-form-model-item>
                  </a-col> 
                  <a-col :span="8">
                    <a-form-model-item :prop="'resetColumns.' + index + '.range_min'" :rules="rules.range_min">
                      <a-form-model-item
                        :prop="'resetColumns.' + index + '.range_min'"
                        :rules="[{ required: true, message: '请输入随机下限', trigger: 'blur' }]"
                      >
                        <!-- <a-input placeholder="随机下限" v-model="item.range_min" /> -->
                          <a-input-number v-model="item.range_min" style="width:200px"  :min="0" />
                      </a-form-model-item>
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="8">
                    <a-form-model-item
                      :prop="'resetColumns.' + index + '.range_max'"
                      :rules="[{ required: true, message: '请输入随机上限', trigger: 'blur' }]"
                    >
                      <!-- <a-input placeholder="随机上限" v-model="item.range_max" /> -->
                      <a-input-number v-model="item.range_max" style="width:200px"  :min="0" />
                    </a-form-model-item>
                  </a-col>
                  <a-col :span="2">
                    <a-form-model-item>
                      <a-icon type="minus-circle" @click="delResetColumn(index)" style="fontsize: 20px" />
                    </a-form-model-item>
                  </a-col>
                </a-row>
                <a-button type="dashed" style="width: 98%;" @click="addResetColumn">
                  <a-icon type="plus" /> 添加模拟列
                </a-button>
              </div>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container> 
    </a-spin>
    <select-data-property-list-modal ref="selectDataPropertyList" @ok="selectDataPropertyOk" />
  </j-modal>
</template>

<script>
import { httpAction, getAction, postAction } from '@/api/manage'
import SelectDataPropertyListModal from '@/views/corp/dataProperty/SelectDataPropertyList'
export default {
  name: 'ExtractModal',
  components: {
      SelectDataPropertyListModal,
  },
  data() {
    return {
      title: '模型预测',
      width: 900,
      visible: false,
      disableSubmit: false,
      modelBaseSelected:'',
      dataSetInfo:{},
      model: {
        predictProperty:'',
        predictPropertyText:'',
        datasetCode:'',
        modelBaseCode: '',
        resetColumns: [{'column_name':'','propName':'','range_max':'','range_min':''}],
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      validatorRules: {
        modelBaseCode: [{ required: true, message: '请选择模型!' }],
      },
      modelBaseList:[],
      selectPropertyType:1,
      resetColumnIndex:0
    }
  },
  methods: {
    addResetColumn() {
      this.model.resetColumns.push({'column_name':'','propName':'','range_max':'','range_min':''})
      this.$forceUpdate()
    },
    delResetColumn(index) {
      console.log(index)
      this.model.resetColumns.splice(index, 1)
      this.$forceUpdate()
    }, 
    edit(record) {
      this.visible = true
      this.confirmLoading = false 
      this.dataSetInfo = record;
      Object.assign(this.model, {
        predictProperty:'',
        predictPropertyText:'',
        datasetCode:record.code,
        modelBaseCode: '',
        resetColumns: [{'column_name':'','propName':'','range_max':'','range_min':''}],
      }) 
      this.loadModelBase(); 
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOk() {
      var that = this 
      this.$refs.form.validate((valid) => {
        if (valid) {  
          if(!that.model.resetColumns || that.model.resetColumns.length == 0){
            that.$message.warning("缺少模拟列参数")
            return;
          }
          that.confirmLoading = true
          postAction('/feature/predict', that.model).then((res) => {
              that.confirmLoading = false
              if (res.success) {  
                that.$message.success('操作成功')  
                that.$emit('ok',{'param':that.model,'result':eval('(' + res.result + ')')})
                that.close();
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
            })
      }});
    },
    submitCallback() {
      this.$emit('ok')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    doSelectDataPropertyList1() {
      var propertyType = '实时'
      this.selectPropertyType = 1 
      if(this.dataSetInfo.dsType =="日报数据集"){
        propertyType ='日报'
      }
      if(this.dataSetInfo.dsType =="实时数据集"){
        propertyType ='实时'
      } 
      this.$refs.selectDataPropertyList.show(propertyType)
    },
    doSelectDataPropertyList2(selectColumnIndex) {
      if(this.model.predictProperty==''){
         this.$message.warning("请先选择模型")
        return;
      }
      var propertyType = '实时'
      this.selectPropertyType = 2 
      this.resetColumnIndex = selectColumnIndex;
      if(this.dataSetInfo.dsType =="日报数据集"){
        propertyType ='日报'
      }
      if(this.dataSetInfo.dsType =="实时数据集"){
        propertyType ='实时'
      } 
      this.$refs.selectDataPropertyList.show(propertyType)
    }, 
    
    selectDataPropertyOk(obj) {  
      if(obj.propNo == this.model.predictProperty){
        this.$message.warning("不能选择和现有属性相同")
        return; 
      } 
      if(this.selectPropertyType ==2){
          this.model.resetColumns[this.resetColumnIndex]['column_name'] = obj.propNo
          this.model.resetColumns[this.resetColumnIndex]['propName'] = obj.propName
      }
      if(this.selectPropertyType ==1){
        this.model.predictProperty = obj.propNo
      }
    },
    loadModelBase(){ 
      var that = this
      that.modelBaseList = [] 
      var url = '/modelBase/modelBase/list?pageSize=99999&dataSetCode='+that.dataSetInfo.code;
      httpAction(url, {}, 'get')
        .then((res) => {
          if (res.success) { 
            that.modelBaseList = res.result.records 
            if(that.modelBaseList.length >0 ){
              that.modelBaseSelected = that.modelBaseList[0]
              that.model.modelBaseCode = that.modelBaseSelected.code;
              that.model.predictProperty = that.modelBaseSelected.predictProperty;
              that.model.predictPropertyText = that.modelBaseSelected.predictProperty_dictText  
            }
            
          } else {
            this.$message.warning(res.message)
          }
        })
        .finally(() => {})
    }, 
    modelBaseHandleChange(value,option){ 
      var that = this;
      that.model.modelBaseCode = value.code;
      that.model.predictProperty = value.predictProperty;
      that.model.predictPropertyText = value.predictProperty_dictText  
    }
  },
}
</script>